<template>
	<view class="container"
		:style="{paddingTop:statusBarHeight + 'px', backgroundColor: `rgba(225, 225, 225, ${opacity})`}">
		<view class="logo u-flex u-flex-center">
			<image src="https://qn.mtj.cdydsy.com/user_client/new-images/mtj.png" class="logo-img"></image>
		</view>
		<view class="search u-flex">
			<u-input v-model="value" :placeholder="currentPlaceholder" :customStyle="searchCustomStyle"
				:placeholdertyle="searchplaceholdertyle" fontSize="28rpx" @confirm="searchChange" clearable
				inputAlign="left">
				<template slot="prefix">
					<image class="img" src="https://qn.mtj.cdydsy.com/user_client/static/icons/ss.png"></image>
				</template>
				<template slot="suffix">
					<button class="button" @tap="searchChange">搜索</button>
				</template>
			</u-input>
		</view>
		<!-- 分类 -->
		<myTabs :scrollTop="scrollTop"></myTabs>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex'
	import myTabs from './tabs.vue'
	export default {
		components: {
			myTabs
		},
		data() {
			return {
				statusBarHeight: 0,
				current: 0,
				value: '',
				placeholder: ['医用面膜 水乳 精华 次抛', '可复美 润百颜 绽研 薇诺娜 创富康'],
				searchCustomStyle: {
					backgroundColor: '#FFFFFF',
					padding: '4rpx 6rpx 4rpx 20rpx',
					borderRadius: "0rpx"
				},
				searchplaceholdertyle: {
					fontSize: '28rpx',
					color: '#CACACA',
				},
				currentPlaceholderIndex: 0,
				opacity: 0, // 新增透明度变量
			}
		},
		props: {
			scrollTop: {
				type: Number,
				default: 0
			}
		},
		computed: {
			currentPlaceholder() {
				return this.placeholder[this.currentPlaceholderIndex] || "";
			},
		},
		watch: {
			scrollTop(newVal) {
				this.opacity = Math.min(this.scrollTop / 100, 0.9); // 这里 100 是一个示例值，可以根据实际情况调整
			}
		},
		mounted() {
			// 设置定时器每秒调用 togglePlaceholder 方法
			this.placeholderInterval = setInterval(this.togglePlaceholder, 3000);
			uni.getSystemInfo({
				success: (res) => {
					this.statusBarHeight = res.statusBarHeight;
				},
				fail: (err) => {
					console.error('获取系统信息失败:', err);
				}
			});
			this.getNavbarHeight()
		},
		methods: {
			...mapMutations('index', ['setNavbarHeight']),
			searchChange() {
				this.$navigateTo(`/subPackages/search/list?keyword=${this.value}&`)
			},
			togglePlaceholder() {
				if (this.placeholder && this.placeholder.length > 0) {
					this.currentPlaceholderIndex = (this.currentPlaceholderIndex + 1) % this.placeholder.length;
				}
			},
			getNavbarHeight() {
				setTimeout(() => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.container').boundingClientRect(data => {
						if (data) {
							const height = data.height;
							this.setNavbarHeight(height)
						}
					}).exec();
				}, 0)
			}
		},
		beforeDestroy() {
			// 清除定时器，避免内存泄漏
			clearInterval(this.placeholderInterval);
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		transition: background-color 0.6s ease;
		padding-bottom: 10rpx;
		z-index: 1;

		.logo {
			height: 44px;

			.logo-img {
				width: 169rpx;
				height: 30rpx;
			}
		}

		.search {
			padding: 0 28rpx;
			box-sizing: border-box;

			.img {
				width: 28rpx;
				height: 26rpx;
				display: block;
			}

			.button {
				height: 56rpx;
				background-color: #000000;
				font-size: 28rpx;
				color: #CACACA;
				line-height: 56rpx;
				border-radius: 0rpx;
			}
		}
	}
</style>